<template>
  <Detail-dialog
    modal
    width="35"
    :title="title"
    :show.sync="dialogShow" @close="close" @save="save('dataForm')">
    <el-form ref="dataForm" :model="dataInfo" label-width="100px">
      <el-form-item   label="菜单名称" prop="menuName" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <el-input class="wp-form-280" clearable v-model="dataInfo.menuName" placeholder="菜单名称"></el-input>
      </el-form-item>
                  <el-row>
                <el-col :span="12">
                    <el-form-item  label="状态" prop="status">
                        <el-tooltip :content="status==1?'启用':'禁用'" placement="top">
                        <el-switch
                            v-model="status"
                            :active-value="1"
                            :inactive-value="0">
                        </el-switch>
                        </el-tooltip>
                    </el-form-item>
                </el-col>
              </el-row>
    </el-form>
    <el-alert  :closable="false" title="菜单配置请谨慎修改" type="warning"></el-alert>
  </Detail-dialog>
</template>

<script>
import DetailDialog from '@/components/DetailDialog'
import system from '@/api/system'
export default {
  props: {
    visible: Boolean,
    title: String,
    data: Object,
    dicTypeOptions: Array
  },
  components: {DetailDialog},
  watch: {
    visible: {
      handler (val) {
        this.dialogShow = val
      },
      immediate: true
    },
    data: {
      handler (val) {
        this.dataInfo = {...val}
        console.log('data', val)
        this.status = val.status
      },
      deep: true,
      immediate: true
    },
    dialogShow (val) {
      if (!val) {
        this.dataInfo = {}
      }
      this.$emit('update:visible', val)
    }
  },
  data () {
    return {
      dialogShow: false,
      status: 1,
      dataInfo: {}
    }
  },
  methods: {
    close () {
      this.dialogShow = false
    },
    save (form) {
      this.$refs[form].validate(validate => {
        if (validate) {
          if (!this.dataInfo.menuCode) {
            this.$msgBox.error('菜单编码不存在')
            return
          }
          const params = {}
          params.status = this.status
          params.menuCode = this.dataInfo.menuCode
          params.parentCode = this.dataInfo.parentCode
          params.rootCode = this.dataInfo.rootCode
          params.menuName = this.dataInfo.menuName
          system.updateMenuAPI(params).then(res => {
            this.close()
            this.$emit('afterSave', res)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
